<template>
  <div class="p-2.5 w-full h-full overflow-hidden" v-loading="loading">
    <div class="bg-white w-full h-full rounded-md flex flex-col items-center p-2.5">
      <el-space>
        <el-link @click="params.isRead = undefined" :type="params.isRead === undefined ? 'primary' : 'default'"
          >全部</el-link
        >
        <el-link @click="params.isRead = 1" :type="params.isRead === 1 ? 'primary' : 'default'">已读</el-link>
        <el-link @click="params.isRead = 0" :type="params.isRead === 0 ? 'primary' : 'default'">未读</el-link>
      </el-space>
      <div class="w-full mt-4">
        <el-input v-model="input" style="width: 100%" placeholder="在此处输入消息内容查询" clearable>
          <template #append> <el-button @click="params.content = input" :icon="Search" /> </template
        ></el-input>
      </div>
      <div class="w-full mt-4 flex-1 overflow-y-auto">
        <div
          v-for="item in unreadList"
          class="bg-gray-50 p-4 mb-2 rounded-md cursor-pointer"
          :key="item.id"
          @click="read(item.id, item.isRead)"
          :class="{ important: item.priority === 1 }"
        >
          <el-tooltip effect="dark" content="点击已读" placement="top" :disabled="item.isRead === 1">
            <div class="flex flex-col">
              <el-badge value="未读" class="item" :hidden="item.isRead === 1">
                <div class="p-2">{{ item.content }}</div>
              </el-badge>
              <div class="text-xs text-gray-400 w-full mt-2 flex justify-end">
                <div>
                  {{ dayjs(item.sendTime).format("YYYY-MM-DD HH:mm:ss") }}
                </div>
                <div class="ml-1">
                  {{ item.senderName }}
                </div>
              </div>
            </div>
          </el-tooltip>
        </div>
      </div>

      <div class="w-full flex justify-end">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <div class="absolute" />
  </div>
</template>

<script setup lang="ts">
import { geHistoryMsgApi, readMsgApi } from "@/api/message/index"
import { ref, watch } from "vue"
import { useUserStore } from "@/store/modules/user"
import { Search } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination"
import dayjs from "@/utils/day"
import { IUserInfoData } from "@/api/login/types/login"
import type * as Message from "@/api/message/types/message"

const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const userStore = useUserStore()
const userInfo = userStore.userInfo as IUserInfoData
const unreadList = ref<Message.IMessageData[]>([])
const input = ref("")
const loading = ref(false)
const params = ref<Message.IMessageRequestData>({
  recipientId: userInfo.id,
  isRead: undefined,
  content: ""
})

const geHistoryMsg = () => {
  loading.value = true
  geHistoryMsgApi({ ...params.value, size: paginationData.pageSize, page: paginationData.currentPage })
    .then((res) => {
      unreadList.value = res.data.list
      paginationData.total = res.data.total
    })
    .finally(() => {
      loading.value = false
    })
}
const read = (id: string, isRead: number) => {
  if (isRead === 1) return
  loading.value = true
  readMsgApi(id)
    .then(() => {
      geHistoryMsg()
    })
    .finally(() => {
      loading.value = false
    })
}
watch(params, geHistoryMsg, {
  deep: true
})

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], geHistoryMsg, {
  immediate: true
})
</script>

<style lang="scss" scoped>
.important {
  background-color: #fef0f0;
  color: #f56c6c;
}
</style>
